<template>
  <div>
    <div id="line3"></div>
  </div>
</template>

    <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("line3"));

      this.chart.setOption({
        color: ['#00DEF2', '#0055F2','#F27300'],
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(13, 64, 71, 0.50)',
        borderColor: 'rgba(143, 225, 252, 0.60)',
        padding: 8,
        textStyle: {
            color: '#fff',
        }
    },
    legend: {
        data: ['数据1', '消极','中性'],
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 14,
        top:20,
        right: 15,
        textStyle: {
            fontSize: 14,
            color: '#737A85'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top:'10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        axisLine: {                     // 轴线设置
            show: false,                   // 显示轴线
        },
        axisLabel: {
            textStyle: {
                color: '#737A85',  //更改坐标轴文字颜色
                fontSize: 12     //更改坐标轴文字大小
            }
        },
        data: [  "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日"]
    },
    yAxis: {
        name:'(万元)',
        nameTextStyle :{
            fontSize:14
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#737A85',
                type:'dashed'
            },
        },
        axisLabel: {
            textStyle: {
                color: '#737A85',  //更改坐标轴文字颜色
                fontSize: 12     //更改坐标轴文字大小
            }
        },
    },
    series: [
        {
            name: '积极',
            type: 'line',
            // smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
                shadowColor: '#fff',
                shadowBlur: 10
            },
            label: {
                show: true,
                position: 'right',
                color: '#fff'
            },
            areaStyle: {
                opacity: 0.8,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                        offset: 0,
                        color: 'RGBA(0, 222, 242, 0.6)'
                    },
                    {
                        offset: 1,
                        color: 'RGBA(0, 222, 242, 0)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [100, 132, 122, 134, 190, 185,201, 220]
        },
        {
            name: '消极',
            type: 'line',
            // smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
                shadowColor: '#fff',
                shadowBlur: 10
            },
            label: {
                show: true,
                position: 'right',
                color: '#fff'
            },
            areaStyle: {
                opacity: 0.8,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'RGBA(0, 85, 242, 0.6)'
                    },
                    {
                        offset: 1,
                        color: 'RGBA(0, 85, 242, 0)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [80, 162, 91, 134, 144, 130, 210, 120]
        },
         {
            name: '中性',
            type: 'line',
            // smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
                shadowColor: '#fff',
                shadowBlur: 10
            },
            label: {
                show: true,
                position: 'right',
                color: '#fff'
            },
            areaStyle: {
                opacity: 0.8,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'RGBA(242, 115, 0, 0.6)'
                    },
                    {
                        offset: 1,
                        color: 'RGBA(242, 115, 0, 0)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [180, 162, 201, 74, 144, 130, 280, 220]
        },
    ]
      });
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

    <style lang="scss" scoped>
#line3 {
  width: 100%;
  height: 40vh;
  // background-color: #554444;
}
</style>